<template>
  <div>
    <!-- 内容主体区域 -->
    <dtDialog
      title="分配接口"
      :visible.sync="visible"
      :lock-scroll="false"
      :append-to-body="true"
      :is-loading="loading"
      width="80%"
      top="2vh"
      @closeDialog="handleClose()"
      @comfirmBtn="onSubmit()"
    >
      <el-form
        ref="form"
        slot="content"
        :model="formData"
        label-position="right"
        label-width="130px"
        style="width: 100%;overflow-x: auto;"
      >
        <div class="dialogform">
          <div class="top-title">角色名称：{{ formData.roleName }}</div>
          <el-table
            :data="apiGroupList"
            stripe
            border
            height="600"
            style="width: 100%"
            class="columnTable"
            :header-cell-style="{background:'#F2F6FC'}"
          >
            <el-table-column
              prop="nodeName"
              label="接口分类"
              width="220"
            >
              <template #header>
                <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">接口分类</el-checkbox>
              </template>
              <template slot-scope="{row}">
                <el-checkbox
                  v-model="row.checked"
                  :indeterminate="row.children.filter(item=>item.checked).length > 0 && !row.checked"
                  @change="handleCheckRowChange($event,row)"
                >
                  {{ row.nodeName }}
                </el-checkbox>
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="接口名称"
              min-width="400"
            >
              <template slot-scope="{ row }">
                <div v-for="item in row.children" :key="item.nodeId" style="margin-bottom:10px">
                  <el-checkbox v-model="item.checked" :indeterminate="item.children.filter(item=>item.checked).length > 0 && !item.checked" @change="handleCheckedApiChange($event,row,item)">
                    <template name="label">
                      <span style="font-weight:bold ">{{ item.nodeName }}</span>
                    </template>
                  </el-checkbox>
                  <div style="padding-left:20px;">
                    <el-checkbox v-for="child in item.children" :key="child.nodeId" v-model="child.checked" @change="grandsonChange($event,row,item)">
                      <template name="label">
                        <span style="font-weight:400">{{ child.nodeName }}</span>
                      </template>
                    </el-checkbox>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-form>
    </dtDialog>
  </div>
</template>
<script>
import roleApi from '@/framework/api/permissionCenter/roleManage'
export default {
  name: 'RoleAssignApi',
  data() {
    return {
      loading: false,
      visible: false,
      formData: {
        roleId: '',
        roleName: ''
      },
      checkAll: false,
      isIndeterminate: true,
      tableData: [],
      allApiGroup: [],
      apiGroupList: []
    }
  },
  methods: {
    openApi(data) {
      this.visible = true
      this.formData.roleId = data.roleId
      this.formData.roleName = data.roleName// 显示角色名称
      roleApi.getRoleResourceTree(this.formData.roleId).then((res) => {
        this.apiGroupList = res.data// 获取所有的数据
        this.checkAllBtn()
      })
    },
    // 整个全选
    handleCheckAllChange(val) {
      this.apiGroupList = this.apiGroupList.map(item => {
        item.checked = val
        item.children && item.children.map(child => {
          child.checked = val
          child.children.map(s => {
            s.checked = val
          })
        })
        return item
      })
      this.isIndeterminate = false
    },
    // 全选一行
    handleCheckRowChange(val, row) {
      row.children = row.children.map(item => {
        item.checked = val
        item.children = item.children.map(child => {
          child.checked = val
          return child
        })
        return item
      })
      this.checkAllBtn()
    },
    // 单选每一个接口名称
    handleCheckedApiChange(value, row, item) {
      row.checked = row.children.every(item => item.checked)
      if (value !== 'No') {
        item.children.map(s => {
          s.checked = item.checked
        })
      }
      this.checkAllBtn()
    },
    grandsonChange(value, row, item) {
      item.checked = item.children.every(item => item.checked)
      this.handleCheckedApiChange('No', row, item)
    },
    // 遍历所有的数据是否为选中状态
    checkAllBtn() {
      this.checkAll = this.apiGroupList.every(item => {
        return item.checked && (item.children || []).every(child => child.checked)
      })
      this.isIndeterminate = this.apiGroupList.some(item => item.checked || (item.children || []).some(child => child.checked)) && !this.checkAll
    },
    // 保存所选
    async onSubmit() {
      this.loading = true
      const grantResourceList = []
      this.apiGroupList.map(item => {
        item.children.map(child => {
          child.children.map(s => {
            s.checked && grantResourceList.push(s.nodeId)
          })
        })
      })
      const data = {
        grantResourceList,
        'roleId': this.formData.roleId
      }
      try {
        const res = await roleApi.grantResource(data)
        if (res.code === '00000') {
          this.$dtMessage({
            type: 'success',
            message: '分配成功'
          })
          this.visible = false
          this.$parent.getList()
        }
        this.loading = false
      } catch (error) {
        this.loading = false
      }
    },
    // 关闭对话框触发
    handleClose() {
      // 清空数据关闭页面
      this.formData = {}
      this.$refs['form'].resetFields()
    }
  }
}
</script>
<style lang="scss" scoped>
.top-title{
  position: relative;
  /* border-left:4px solid #5688E8; */
  color: #131314;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  margin: 0 0 24px 0;
  white-space: nowrap;
  /* margin-right: 10px; */
 }
.columnTable{
  margin: 0 auto;
  border: 1px solid #dfe6ec !important;
}

</style>
